<template>
    <div id="geo" style="width: 100%; height: 580px"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted } from 'vue'

import { option, useChart, geoCoordMap } from './constant'
import { counties } from '../../constant'

export default defineComponent({
    name: 'CenterBar',
    setup() {
        const constant = {
            option
        }
        onMounted(async () => {
            const mychart = await useChart()
            let { option } = constant
            const data = JSON.parse(counties.counties)

            option.series[0].data = methods.convertData(data)
            option.series[1].data = data
            option.series[2].data = methods.convertData(data)
            mychart.setOption(option)
        })
        const methods = {
            convertData(data: any) {
                var res = [] as any
                data.forEach((el: any) => {
                    const geoCoord: any = geoCoordMap[el.name]
                    if (geoCoord) {
                        res.push({
                            name: el.name,
                            value: geoCoord.concat(el.value)
                        })
                    }
                })
                return res
            }
        }
        return {
            ...constant,
            ...methods
        }
    }
})
</script>
